<template>
  <basic-container>
    <el-row class="row-bg query-container" gutter="20">
      <el-col span="21">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-row class="row-bg" gutter="20">
            <el-col span="6">
                <el-form-item label="选择地址">
                  <el-select v-model="form.area" placeholder="选择地址">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label="光伏功率">
                <el-select v-model="form.area" placeholder="光伏功率">
                  <el-option label="功率一" value="shanghai"></el-option>
                  <el-option label="功率二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label="电池容量">
                <el-select v-model="form.area" placeholder="电池容量">
                  <el-option label="容量一" value="shanghai"></el-option>
                  <el-option label="容量二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label="电池SOC">
                <el-select v-model="form.area" placeholder="电池SOC">
                  <el-option label="SOC一" value="shanghai"></el-option>
                  <el-option label="SOC二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="row-bg" gutter="20">
            <el-col span="6">
              <el-form-item label="选择地址">
                <el-select v-model="form.area" placeholder="选择地址">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label="光伏功率">
                <el-select v-model="form.area" placeholder="光伏功率">
                  <el-option label="功率一" value="shanghai"></el-option>
                  <el-option label="功率二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label="电池容量">
                <el-select v-model="form.area" placeholder="电池容量">
                  <el-option label="容量一" value="shanghai"></el-option>
                  <el-option label="容量二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="6">
              <el-form-item label="电池SOC">
                <el-select v-model="form.area" placeholder="电池SOC">
                  <el-option label="SOC一" value="shanghai"></el-option>
                  <el-option label="SOC二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col span="3" class="button-container">
        <el-button type="primary">生成策略</el-button>
      </el-col>
    </el-row>
    <el-row class="row-bg" gutter="20">
      <el-col span="12">
        <div id="bar1-chart" class="bg-purple-light chart-container"></div>
      </el-col>
      <el-col span="12">
        <div id="bar2-chart" class="bg-purple-light chart-container"></div>
      </el-col>
    </el-row>
    <el-row class="row-bg" gutter="20">
      <el-col span="12">
        <div id="line-chart" class="bg-purple-light chart-container"></div>
      </el-col>
      <el-col span="12">
        <div class="bg-purple-light" style="padding-top: 30px; padding-bottom: 30px">
          <el-row gutter="20">
            <el-col span="5" class="progress-label">
              电池循环次数
            </el-col>
            <el-col span="19">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col span="5" class="progress-label">
              总照明时长
            </el-col>
            <el-col span="19">
              <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col span="5" class="progress-label">
              平均照明功率
            </el-col>
            <el-col span="19">
              <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
  import echarts from 'echarts';

  export default {
    data() {
      return {
        form: {
          area: '',
          power: ''
        },
        bar1: {
          instance: null,
        },
        bar2: {
          instance: null,
        },
        line1: {
          instance: null,
        },
        bar3: {
          instance: null,
        }

      }
    },
    methods: {
      getBar1Opt() {
        return {
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'直接访问',
              type:'bar',
              barWidth: '60%',
              data:[10, 52, 200, 334, 390, 330, 220]
            }
          ]
        };
      },
      initBar1Chart() {
        var dom = document.getElementById('bar1-chart');

        this.bar1.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.bar1.instance.setOption(this.getBar1Opt());
        var self = this;
        window.addEventListener('resize', function () {
          self.bar1.instance.resize();
        });
      },
      getLineOpt() {
        var data = [
          ["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],
          ["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],
          ["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],
          ["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],
          ["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],
          ["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],
          ["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],
          ["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],
          ["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],
          ["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60],
          ["2000-07-25",44],["2000-07-26",127],["2000-07-27",114],["2000-07-28",86],["2000-07-29",73],
          ["2000-07-30",52],["2000-07-31",69],["2000-08-01",86],["2000-08-02",118],["2000-08-03",56],
          ["2000-08-04",91],["2000-08-05",121],["2000-08-06",127],["2000-08-07",78],["2000-08-08",79],
          ["2000-08-09",46],["2000-08-10",108],["2000-08-11",80],["2000-08-12",79],["2000-08-13",69],
          ["2000-08-14",80],["2000-08-15",105],["2000-08-16",119],["2000-08-17",105],["2000-08-18",55],
          ["2000-08-19",74],["2000-08-20",41],["2000-08-21",62],["2000-08-22",104],["2000-08-23",118],
          ["2000-08-24",121],["2000-08-25",126],["2000-08-26",99],["2000-08-27",92],["2000-08-28",75],
          ["2000-08-29",91],["2000-08-30",94],["2000-08-31",69],["2000-09-01",93],["2000-09-02",124],
          ["2000-09-03",120],["2000-09-04",93],["2000-09-05",26],["2000-09-06",32],["2000-09-07",70],
          ["2000-09-08",89],["2000-09-10",117],["2000-09-11",144],["2000-09-12",111],["2000-09-13",120],
          ["2000-09-14",97],["2000-09-15",108],["2000-09-17",74],["2000-09-18",105],["2000-09-19",127],
          ["2000-09-20",143],["2000-09-21",62],["2000-09-22",80],["2000-09-23",136],["2000-09-24",29],
          ["2000-09-25",91],["2000-09-26",93],["2000-09-27",114],["2000-09-28",45],["2000-09-29",102],
          ["2000-09-30",111],["2000-10-01",93],["2000-10-02",117],["2000-10-03",78],["2000-10-04",76],
          ["2000-10-05",100],["2000-10-06",75],["2000-10-07",169],["2000-10-08",59],["2000-10-09",89],
          ["2000-10-10",91],["2000-10-11",75],["2000-10-12",28],["2000-10-13",47],["2000-10-14",92],
          ["2000-10-16",72],["2000-10-17",149],["2000-10-18",86],["2000-10-19",88],["2000-10-20",104],
          ["2000-10-21",91],["2000-10-22",88],["2000-10-23",55],["2000-10-24",63],["2000-10-25",41],
          ["2000-10-26",85],["2000-10-27",99],["2000-10-28",121],["2000-10-29",96],["2000-10-30",90],
          ["2000-11-01",80],["2000-11-02",116],["2000-11-03",207],["2000-11-04",306],["2000-11-05",283],
          ["2000-11-06",200],["2000-11-07",93],["2000-11-08",49],["2000-11-09",78],["2000-11-10",40],
          ["2000-11-11",74],["2000-11-12",67],["2000-11-13",118],["2000-11-14",196],["2000-11-15",101],
          ["2000-11-16",59],["2000-11-17",83],["2000-11-18",83],["2000-11-19",124],["2000-11-20",57],
          ["2000-11-21",78],["2000-11-22",113],["2000-11-23",172],["2000-11-24",129],["2000-11-25",103],
          ["2000-11-26",75],["2000-11-27",125],["2000-11-28",121],["2000-11-29",204],["2000-11-30",141],
          ["2000-12-01",106],["2000-12-02",146],["2000-12-03",95],["2000-12-04",149],["2000-12-05",71],
          ["2000-12-07",157],["2000-12-08",141],["2000-12-09",197],["2000-12-10",43],["2000-12-11",81],
          ["2000-12-12",109],["2000-12-13",118],["2000-12-15",115],["2000-12-16",92],["2000-12-17",123],
          ["2000-12-18",147],["2000-12-19",59],["2000-12-20",103],["2000-12-21",146],["2000-12-22",137],
          ["2000-12-23",74],["2000-12-24",64],["2000-12-25",67],["2000-12-26",107],["2000-12-27",101],
          ["2000-12-28",79],["2000-12-29",137],["2000-12-30",165],["2000-12-31",81],["2001-01-01",100],
          ["2001-01-02",126],["2001-01-03",56],["2001-01-05",108],["2001-01-06",88],["2001-01-07",78],
          ["2001-01-08",105],["2001-01-09",77],["2001-01-10",105],["2001-01-11",93],["2001-01-12",107],
          ["2001-01-13",128],["2001-01-14",53],["2001-01-15",81],["2001-01-16",128],["2001-01-17",179],
          ["2001-01-18",225],["2001-01-19",116],["2001-01-20",153],["2001-01-21",161],["2001-01-22",149],
          ["2001-01-23",115],["2001-01-24",136],["2001-01-25",101],["2001-01-26",109],["2001-01-27",108],
          ["2001-01-28",86],["2001-01-29",101],["2001-01-30",109],["2001-01-31",139],["2001-02-01",110],
          ["2001-02-02",113],["2001-02-03",130],["2001-02-04",62],["2001-02-05",88],["2001-02-06",105],
          ["2001-02-07",87],["2001-02-08",140],["2001-02-09",116],["2001-02-10",100],["2001-02-11",83],
          ["2001-02-12",102],["2001-02-13",106],["2001-02-14",157],["2001-02-15",131],["2001-02-16",77],
          ["2001-02-17",101],["2001-02-18",148],["2001-02-19",227],["2001-02-20",105],["2001-02-21",155],
          ["2001-02-22",293],["2001-02-23",99],["2001-02-24",57],["2001-02-25",97],["2001-02-26",104],
          ["2001-02-27",117],["2001-02-28",125],["2001-03-01",216],["2001-03-02",149],["2001-03-03",256],
          ["2001-03-04",172],["2001-03-05",113],["2001-03-06",338],["2001-03-07",57],["2001-03-08",48],
          ["2001-03-10",111],["2001-03-11",87],["2001-03-12",175],["2001-03-13",186],["2001-03-14",201],
          ["2001-03-15",76],["2001-03-16",131],["2001-03-17",127],["2001-03-18",128],["2001-03-19",152],
          ["2001-03-20",144],["2001-03-21",162],["2001-03-22",500],["2001-03-24",358],["2001-03-25",128],
          ["2001-03-26",54],["2001-03-27",57],["2001-03-28",54],["2001-03-29",80],["2001-03-30",71],
          ["2001-03-31",73],["2001-04-01",139],["2001-04-02",224],["2001-04-03",107],["2001-04-04",150]];

        return {
          title: {
            text: 'Beijing AQI'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            data: data.map(function (item) {
              return item[0];
            })
          },
          yAxis: {
            splitLine: {
              show: false
            }
          },
          toolbox: {
            left: 'center',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          dataZoom: [{
            startValue: '2014-06-01'
          }, {
            type: 'inside'
          }],
          visualMap: {
            top: 10,
            right: 10,
            pieces: [{
              gt: 0,
              lte: 50,
              color: '#096'
            }, {
              gt: 50,
              lte: 100,
              color: '#ffde33'
            }, {
              gt: 100,
              lte: 150,
              color: '#ff9933'
            }, {
              gt: 150,
              lte: 200,
              color: '#cc0033'
            }, {
              gt: 200,
              lte: 300,
              color: '#660099'
            }, {
              gt: 300,
              color: '#7e0023'
            }],
            outOfRange: {
              color: '#999'
            }
          },
          series: {
            name: 'Beijing AQI',
            type: 'line',
            data: data.map(function (item) {
              return item[1];
            }),
            markLine: {
              silent: true,
              data: [{
                yAxis: 50
              }, {
                yAxis: 100
              }, {
                yAxis: 150
              }, {
                yAxis: 200
              }, {
                yAxis: 300
              }]
            }
          }
        }
      },
      initLineChart() {
        var dom = document.getElementById('line-chart');

        this.line1.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.line1.instance.setOption(this.getLineOpt());
        var self = this;
        window.addEventListener('resize', function () {
          self.line1.instance.resize();
        });
      },
      getBar2Opt() {
        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];
        var data4 = [];

        for (var i = 0; i < 10; i++) {
          xAxisData.push('Class' + i);
          data1.push((Math.random() * 2).toFixed(2));
          data2.push(-Math.random().toFixed(2));
          data3.push((Math.random() * 5).toFixed(2));
          data4.push((Math.random() + 0.3).toFixed(2));
        }

        var itemStyle = {
          normal: {
          },
          emphasis: {
            barBorderWidth: 1,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.5)'
          }
        };

        return {
          backgroundColor: '#eee',
          legend: {
            data: ['bar', 'bar2', 'bar3', 'bar4'],
            align: 'left',
            left: 10
          },
          brush: {
            toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
            xAxisIndex: 0
          },
          toolbox: {
            feature: {
              magicType: {
                type: ['stack', 'tiled']
              },
              dataView: {}
            }
          },
          tooltip: {},
          xAxis: {
            data: xAxisData,
            name: 'X Axis',
            silent: false,
            axisLine: {onZero: true},
            splitLine: {show: false},
            splitArea: {show: false}
          },
          yAxis: {
            inverse: true,
            splitArea: {show: false}
          },
          grid: {
            left: 100
          },
          visualMap: {
            type: 'continuous',
            dimension: 1,
            text: ['High', 'Low'],
            inverse: true,
            itemHeight: 200,
            calculable: true,
            min: -2,
            max: 6,
            top: 60,
            left: 10,
            inRange: {
              colorLightness: [0.4, 0.8]
            },
            outOfRange: {
              color: '#bbb'
            },
            controller: {
              inRange: {
                color: '#2f4554'
              }
            }
          },
          series: [
            {
              name: 'bar',
              type: 'bar',
              stack: 'one',
              itemStyle: itemStyle,
              data: data1
            },
            {
              name: 'bar2',
              type: 'bar',
              stack: 'one',
              itemStyle: itemStyle,
              data: data2
            },
            {
              name: 'bar3',
              type: 'bar',
              stack: 'two',
              itemStyle: itemStyle,
              data: data3
            },
            {
              name: 'bar4',
              type: 'bar',
              stack: 'two',
              itemStyle: itemStyle,
              data: data4
            }
          ]
        };
      },
      initBar2Chart() {
        var dom = document.getElementById('bar2-chart');

        this.bar2.instance = echarts.init(dom, {
          renderer: 'svg', // 支持 'canvas' 或者 'svg'
          width: null, // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
          height: null, // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
        });
        this.bar2.instance.setOption(this.getBar2Opt());
        var self = this;
        window.addEventListener('resize', function () {
          self.bar2.instance.resize();
        });

        self.bar2.instance.on('brushSelected', renderBrushed);

        function renderBrushed(params) {
          var brushed = [];
          var brushComponent = params.batch[0];

          for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
            var rawIndices = brushComponent.selected[sIdx].dataIndex;
            brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
          }

          // self.bar2.instance.setOption({
          //   title: {
          //     backgroundColor: '#333',
          //     text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
          //     bottom: 0,
          //     right: 0,
          //     width: 100,
          //     textStyle: {
          //       fontSize: 12,
          //       color: '#fff'
          //     }
          //   }
          // });
        }
      },

    },
    mounted() {

      this.initBar1Chart();
      this.initBar2Chart();
      this.initLineChart();

    }
  }

</script>

<style>
  .query-container {
    margin-bottom: 0 !important;
  }
  .query-container .el-row,
  .query-container .el-col,
  .query-container .el-form-item{
    margin-bottom: 0;
  }
  .chart-container {
    padding: 2vh 1vh;
    height: 520px;
  }

  .progress-label {
    text-align: right;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
